<template>
	<view v-if="ifloading" class="my_loading">
		<div class="loadingio-spinner-bean-eater-28wprq4euqs">
			<div class="ldio-8xsrr0up5f9">
				<div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			ifloading: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.my_loading {
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -26px;
		z-index: 99999;
	}

	@keyframes ldio-8xsrr0up5f9-1 {
		0% {
			transform: rotate(0deg)
		}

		50% {
			transform: rotate(-45deg)
		}

		100% {
			transform: rotate(0deg)
		}
	}

	@keyframes ldio-8xsrr0up5f9-2 {
		0% {
			transform: rotate(180deg)
		}

		50% {
			transform: rotate(225deg)
		}

		100% {
			transform: rotate(180deg)
		}
	}

	.ldio-8xsrr0up5f9>div:nth-child(2) {
		transform: translate(-15px, 0);
	}

	.ldio-8xsrr0up5f9>div:nth-child(2) div {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 60px;
		height: 30px;
		border-radius: 60px 60px 0 0;
		background: #93dbe9;
		animation: ldio-8xsrr0up5f9-1 1s linear infinite;
		transform-origin: 30px 30px
	}

	.ldio-8xsrr0up5f9>div:nth-child(2) div:nth-child(2) {
		animation: ldio-8xsrr0up5f9-2 1s linear infinite
	}

	.ldio-8xsrr0up5f9>div:nth-child(2) div:nth-child(3) {
		transform: rotate(-90deg);
		animation: none;
	}

	@keyframes ldio-8xsrr0up5f9-3 {
		0% {
			transform: translate(95px, 0);
			opacity: 0
		}

		20% {
			opacity: 1
		}

		100% {
			transform: translate(35px, 0);
			opacity: 1
		}
	}

	.ldio-8xsrr0up5f9>div:nth-child(1) {
		display: block;
	}

	.ldio-8xsrr0up5f9>div:nth-child(1) div {
		position: absolute;
		top: 46px;
		left: -4px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #689cc5;
		animation: ldio-8xsrr0up5f9-3 1s linear infinite
	}

	.ldio-8xsrr0up5f9>div:nth-child(1) div:nth-child(1) {
		animation-delay: -0.67s
	}

	.ldio-8xsrr0up5f9>div:nth-child(1) div:nth-child(2) {
		animation-delay: -0.33s
	}

	.ldio-8xsrr0up5f9>div:nth-child(1) div:nth-child(3) {
		animation-delay: 0s
	}

	.loadingio-spinner-bean-eater-28wprq4euqs {
		width: 57px;
		height: 57px;
		display: inline-block;
		overflow: hidden;
		// background: #f1f2f3;
	}

	.ldio-8xsrr0up5f9 {
		width: 100%;
		height: 100%;
		position: relative;
		transform: translateZ(0) scale(0.57);
		backface-visibility: hidden;
		transform-origin: 0 0;
		/* see note above */
	}

	.ldio-8xsrr0up5f9 div {
		box-sizing: content-box;
	}
</style>
